<template>
	<div class="header">
		<div class="header-toolbar">
			<div class="fl tools">
				<ul>
					<li><span class="ico-button">信用平台管理系统</span></li>
				</ul>
			</div>
			<div class="fr tools">
				<ul>
					<!-- <li><font-awesome-icon icon="user" /> <span>用户名</span></li> -->
					<!-- <li><icon name="user" /> <span>用户名</span></li> -->
					<li><a-icon type="user" />&nbsp;<span>admin</span></li>
					<!-- <li><Button type="link" icon="poweroff" onClick={handleQuit}>退出</Button></li> -->
					<li><a-button icon="poweroff" @click="logout()">退出</a-button></li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	// import { library } from '@fortawesome/fontawesome-svg-core'
	// import { faUser } from '@fortawesome/free-solid-svg-icons'
	import { Icon, Button } from 'ant-design-vue'

	Vue.use(Icon);
	Vue.use(Button);
	// library.add(faUser)

	export default {
		name: 'GlobalHeader',
		methods: {
			async logout() {
				await this.$store.dispatch('logout')
				this.$router.push('/login')
			}
		}
	}
</script>

<style lang="less">
	.header {
		.tools {
			li {
				.fa {
					margin-right: 3px;
				}
			}
		}
		.ant-btn {
			border: none;
		}
	}
</style>